<template>
	<view class="box">
		<u-notice-bar text="超过三天未解决上报支队，超过七天未解决市总队，超过十天未解决国家消防局"></u-notice-bar>
		<view>
			<view class="display_flex title_list">
				<u-tabs :list="tabsList" @click="tabsClick"></u-tabs>
			</view>
			<view class="charts-box">
				<view class="com_title display_flex space_between">
					<view class="display_flex">
						<view class="bar"></view>
						<text>DeepSeek大模型+DD-DC预测图谱</text>
					</view>
					<!-- <view style="color: #49A0FF;">介绍</view> -->
				</view>
				<qiun-data-charts type="line" :opts="opts1" :chartData="chartData1" />
			</view>
			<view class="charts-box">
				<view class="com_title margin_top_normal display_flex">
					<view class="bar"></view>
					<text>实际图谱</text>
				</view>
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				<!-- <view style="color: red;padding: 10rpx;">
					超过三天未解决上报支队，超过七天未解决市总队，超过十天未解决国家消防局
				</view> -->
			</view>
			
		</view>
	</view>
</template>

<script>
	let week = {
		categories: ["周一", "周二", "周三","周四","周五","周六","周日"],
		series: [{
				name: "超三天未上报",
				data: [35, 36, 31, 33,31, 33,56]
			},
			{
				name: "超五天未上报",
				data: [18, 27, 21, 24,34,12,35]
			},
			{
				name: "超十天未上报",
				data: [11, 17, 6, 14,24,6,19]
			}
		]
	}
	let month = {
		categories: ["周一", "周二", "周三","周四","周五","周六","周日"],
		series: [{
				name: "超三天未上报",
				data: [35, 36, 31, 33,31, 33,56]
			},
			{
				name: "超五天未上报",
				data: [18, 27, 21, 24,34,12,35]
			},
			{
				name: "超十天未上报",
				data: [11, 17, 6, 14,24,6,19]
			}
		]
	}
	let year = {
		
	}
	export default {
		data() {
			return {
				tabsList:[
					{
						name:'周'
					},
					{
						name:'月'
					},
					{
						name:'年'
					}
				],
				chartData: {},
				chartData1:{},
				opts: {
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				opts1: {
					legend:{
						show:false
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			};
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					let res = {
						categories: ["周一", "周二", "周三","周四","周五","周六","周日"],
						series: [{
								name: "超三天未解决报支队",
								data: [35, 34, 31, 31,31, 33,53],
							},
							{
								name: "超五天未解决报总队",
								data: [18, 25, 21, 24,30,12,33]
							},
							{
								name: "超十天未解决报国家局",
								data: [13, 19, 6, 14,24,6,18]
							}
						]
					};
					let res1 = {
						categories: ["周一", "周二", "周三","周四","周五","周六","周日"],
						series: [{
								name: "超三天未解决报支队",
								data: [35, 36, 31, 33,31, 33,56],
								lineType:'dash',
							},
							{
								name: "超五天未解决报总队",
								data: [18, 27, 21, 24,34,12,35],
								lineType:'dash',
							},
							{
								name: "超十天未解决报国家局",
								data: [11, 17, 6, 14,24,6,19],
								lineType:'dash',
							}
						],
						legend: {
							show: false, 
							margin: 5, 
							itemGap: 10,
							position: 'bottom'
						},
					};
					this.chartData = JSON.parse(JSON.stringify(res));
					this.chartData1 = JSON.parse(JSON.stringify(res1));
				}, 500);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.box{
		box-sizing: border-box;
	}
	.title_list{
		padding: 10rpx 20rpx
	}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
		padding-bottom: 50rpx;
	}
	.com_title{
		padding:20rpx 30rpx;
		.bar{
			background: #49A0FF;
			width: 8rpx;
			height: 34rpx;
		}
		text{
			font-size: 32rpx;
			font-weight: bold;
			margin-left: 10rpx;
		}
	}
</style>